//@ts-nocheck
import React, { useEffect, useState } from 'react'
import { Tooltip } from 'antd'
import './index.less'

const TooltipTitle = ({ x, y, legend }) => {
  const [tooltipInfo, setTooltipInfo] = useState({ color: '', text: '' })

  useEffect(() => {
    if (x >= 50 && y >= 50) {
      setTooltipInfo({
        color: legend[3].color,
        text: legend[3].title
      })
    } else if (x > 50 && y < 50) {
      setTooltipInfo({
        color: legend[1].color,
        text: legend[1].title
      })
    } else if (x < 50 && y < 50) {
      setTooltipInfo({
        color: legend[0].color,
        text: legend[0].title
      })
    } else if (x < 50 && y > 50) {
      setTooltipInfo({
        color: legend[2].color,
        text: legend[2].title
      })
    }
  }, [])
  return (
    <>
      <span className="block" style={{ backgroundColor: `${tooltipInfo.color}` }} />
      <span>{tooltipInfo.text}</span>
    </>
  )
}

const LegendItem = ({ color, title }) => {
  return (
    <div className="legend-item">
      <span style={{ backgroundColor: color }} className="legend-item-span" />
      <span className="legend-item-title">{title}</span>
    </div>
  )
}

const FourQuadrantChart = ({ legend, xMax, yMax, axisTopText, axisBottomText, points }) => {
  const [showPointsList, setShowPoints] = useState<any>([])

  useEffect(() => {
    setShowPoints(
      points?.map((point) => {
        return {
          x: ((point.x + xMax) / (2 * xMax)) * 100,
          y: ((point.y + yMax) / (2 * yMax)) * 100,
          title: point.title,
          color: point.color,
        }
      })
    )
  }, [points])

  return (
    <div className="four-quadrant-diagram">
      <p className="axis-top-text">{axisTopText}</p>
      <div className="legend-box">
        {legend?.map((item, index) => {
          return (
            <div
              key={index}
              className={`legend-item ${index === 0 ? 'first' : null} ${
                index === legend.length - 1 ? 'last' : null
              }`}
              style={{ backgroundColor: item.color }}
            />
          )
        })}
        {showPointsList?.map((point, pointIndex) => {
          return (
            <div
              className="legend-point"
              style={{ left: `${point.x}%`, top: `${point.y}%` }}
              key={pointIndex}
            >
              <Tooltip
                overlayClassName="four-quadrant-diagram-tooltip"
                placement="right"
                color="#ffffff"
                title={<TooltipTitle legend={legend} x={point.x} y={point.y} />}
              >
                <span className="point-item-box">
                  <span className="block">
                    <span className="circle" />
                  </span>
                </span>
              </Tooltip>
              <span className="point-item-text">{point.title}</span>
            </div>
          )
        })}
      </div>
      <p className="axis-bottom-text">{axisBottomText}</p>
      <div className="legend">
        {legend?.map((item, index) => {
          return <LegendItem key={index} color={item.color} title={item.title} />
        })}
      </div>
    </div>
  )
}

export default FourQuadrantChart
